<template>
	<div :class="[blockClass, { 'hover': hovering }]" class="demo-block" @mouseenter="hovering = true" @mouseleave="hovering = false">
		<div class="source">
			<slot name="source"></slot>
		</div>
		<div ref="meta" class="meta">
			<div v-if="$slots.default" class="description">
				<slot></slot>
			</div>
			<div class="highlight">
				<slot name="highlight"></slot>
			</div>
		</div>
		<div ref="control" :class="{ 'is-fixed': fixedControl }" class="demo-block-control" @click="isExpanded = !isExpanded">
			<transition name="arrow-slide">
				<i :class="[iconClass, { 'hovering': hovering }]"></i>
			</transition>
			<transition name="text-slide">
				<span v-show="hovering">{{ controlText }}</span>
			</transition>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			hovering: false,
			isExpanded: false,
			fixedControl: false,
			scrollParent: null
		};
	},
	methods: {
		scrollHandler() {
			const {top, bottom, left} = this.$refs.meta.getBoundingClientRect();
			this.fixedControl = bottom > document.documentElement.clientHeight &&
				top + 44 <= document.documentElement.clientHeight;
			this.$refs.control.style.left = this.fixedControl ? `${left}px` : '0';

			xmSelect.get().forEach(xs => xs.calcPosition());
		},
		removeScrollHandler() {
			this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
		}
	},
	computed: {
		langConfig() {
			return {
				"hide-text": "隐藏代码",
				"show-text": "显示代码",
			}
		},
		blockClass() {
			return `demo-xm-select demo-${this.$router.currentRoute.path.split('/').pop()}`;
		},
		iconClass() {
			return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
		},
		controlText() {
			return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'];
		},
		codeArea() {
			return this.$el.getElementsByClassName('meta')[0];
		},
		codeAreaHeight() {
			if (this.$el.getElementsByClassName('description').length > 0) {
				return this.$el.getElementsByClassName('description')[0].clientHeight +
					this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
			}
			return this.$el.getElementsByClassName('highlight')[0].clientHeight;
		}
	},
	watch: {
		isExpanded(val) {
			this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0';
			if (!val) {
				this.fixedControl = false;
				this.$refs.control.style.left = '0';
				this.removeScrollHandler();
				return;
			}
			setTimeout(() => {
				this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
				this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
				this.scrollHandler();
			}, 200);
		}
	},
	mounted() {
		this.$nextTick(() => {
			let highlight = this.$el.getElementsByClassName('highlight')[0];
			if (this.$el.getElementsByClassName('description').length === 0) {
				highlight.style.width = '100%';
				highlight.borderRight = 'none';
			}
		});
	},
	beforeDestroy() {
		this.removeScrollHandler();
	}
};
</script>
<style lang="less">
.demo-block {
	border: solid 1px #ebebeb;
	border-radius: 3px;
	transition: .2s;

	&.hover {
		box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
	}

	code {
		font-family: Menlo, Monaco, Consolas, Courier, monospace;
	}

	.demo-button {
		float: right;
	}

	.source {
		padding: 24px;
	}

	.meta {
		background-color: #fafafa;
		border-top: solid 1px #eaeefb;
		overflow: hidden;
		height: 0;
		transition: height .2s;
	}

	.description {
		padding: 20px;
		box-sizing: border-box;
		border: solid 1px #ebebeb;
		border-radius: 3px;
		font-size: 14px;
		line-height: 22px;
		color: #666;
		word-break: break-word;
		margin: 10px;
		background-color: #fff;

		p {
			margin: 0;
			line-height: 26px;
		}

		code {
			color: #5e6d82;
			background-color: #e6effb;
			margin: 0 4px;
			display: inline-block;
			padding: 1px 5px;
			font-size: 12px;
			border-radius: 3px;
			height: 18px;
			line-height: 18px;
		}
	}

	.highlight {
		pre {
			margin: 0;
		}

		code.hljs {
			margin: 0;
			border: none;
			max-height: none;
			border-radius: 0;

			&::before {
				content: none;
			}
		}
	}

	.demo-block-control {
		border-top: solid 1px #eaeefb;
		height: 44px;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		text-align: center;
		margin-top: -1px;
		color: #d3dce6;
		cursor: pointer;
		position: relative;

		&.is-fixed {
			position: fixed;
			bottom: 0;
			width: 868px;
		}

		i {
			font-size: 16px;
			line-height: 44px;
			transition: .3s;

			&.hovering {
				transform: translateX(-40px);
			}
		}

		> span {
			position: absolute;
			transform: translateX(-30px);
			font-size: 14px;
			line-height: 44px;
			transition: .3s;
			display: inline-block;
		}

		&:hover {
			color: #409EFF;
			background-color: #f9fafc;
		}

		& .text-slide-enter,
		& .text-slide-leave-active {
			opacity: 0;
			transform: translateX(10px);
		}

		.control-button {
			line-height: 26px;
			position: absolute;
			top: 0;
			right: 0;
			font-size: 14px;
			padding-left: 5px;
			padding-right: 25px;
		}
	}
}
</style>
